<template>
  <div class="webinfo-list">
    <el-button v-if="flag" type="custom" @click="handleAdd()">新增</el-button>
    <br />
    <el-form ref="form" label-width="120px">
      <el-row :gutter="20" v-for="v in curData" :key="v.id">
        <el-form-item :label="v.label">
          <el-col :span="$route.meta.scopeType == 1 ? 16 : 4">
            <el-input
              :ref="'input' + v.id"
              v-if="v.type == 1"
              v-model.trim="v.value"
            >
            </el-input>
            <img
              class="show-img"
              v-if="v.type == 2"
              :src="
                v.hasOwnProperty('sysAttachment')
                  ? v.sysAttachment.httpUrl
                  : defaultImg
              "
              alt=""
            />
          </el-col>
          <el-col :span="8">
            <el-button-group>
              <el-button
                @click="handleSave(v)"
                icon="el-icon-check"
                title="保存"
                v-if="flag || v.type == 1"
                type="custom"
              ></el-button>
              <el-button
                @click="handleDelete(v)"
                icon="el-icon-close"
                title="删除"
                v-if="flag"
              ></el-button>
              <el-button
                @click="handleEdit(v)"
                icon="el-icon-edit"
                title="修改"
                type="custom"
                v-if="flag || v.type == 2"
              ></el-button>
            </el-button-group>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  sysBaseInfoQuery,
  sysBaseInfoDelete,
  sysBaseInfoUpdate,
} from '@/api/admin/system/sysBaseInfo.js'
import Bus from '@/utils/bus.js'
import webinfo from '@/mixins/webinfo.js'
export default {
  mixins: [webinfo],
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 99,
      },
      tableData: [],
      curData: [],
    }
  },
  watch: {
    $route() {
      this.getList()
    },
  },
  props: ['flag'],
  mounted() {
    this.$store.dispatch('setwebinfo')
    this.getList()
    Bus.$on('refreshWebBaseList', (v) => {
      if (v) {
        Object.assign(this.listQuery, v)
      }
      this.getList()
    })
  },
  beforeDestroy() {
    Bus.$off('refreshWebBaseList')
  },
  methods: {
    getList() {
      sysBaseInfoQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.$store.commit(
          'SETWEBINFO',
          JSON.parse(JSON.stringify(this.tableData)),
        )
        let scopeType = this.$route.meta.scopeType
        this.curData = this.tableData.filter((v) => v.scopeType == scopeType)
      })
    },
    handleAdd() {
      Bus.$emit('showDialogWebBaseAdd')
    },
    handleSave(v) {
      let value = ''
      // if (v.code == 'copyright') {
      //   value = this.$refs['input' + v.id][0].message
      // } else {
      //   }
      value = this.$refs['input' + v.id][0].value
      sysBaseInfoUpdate({ id: v.id, value: value }).then((res) => {
        this.getList()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    handleEdit(v) {
      Bus.$emit('showDialogWebBaseAdd', v)
    },
    //删除确认
    handleDelete(row) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.delete(row)
        })
        .catch(() => {})
    },
    //删除
    delete(row) {
      sysBaseInfoDelete(row.id).then((res) => {
        this.getList()
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
  },
}
</script>
<style scoped lang="scss">
// .webinfo-list {
//   max-height: calc(100vh - 200px);
//   overflow-x: hidden;
//   overflow-y: auto;
// }
.show-img {
  height: 80px;
  width: auto;
  display: block;
  padding: 2px;
  border: 1px solid #eee;
}
</style>